<template>
    <div class="container">
      <div class="tips-title">1. 点击上传</div>
      <el-upload action="#" :on-preview="handlePreview1" :on-remove="handleRemove1" :before-remove="beforeRemove1" multiple :limit="3" :on-exceed="handleExceed1" :file-list="fileListTest">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <div class="tips-title">2.用户头像上传<span class="tips-explain">使用 before-upload 限制用户上传的图片格式和大小。</span></div>
      <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload2">
        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="tips-title">3.照片墙<span class="tips-explain">使用 list-type 属性来设置文件列表的样式。</span></div>
      <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview3" :on-remove="handleRemove3">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible3">
        <img width="100%" :src="dialogImageUrl3" alt="">
      </el-dialog>
      <div class="tips-title">4.文件缩略图<span class="tips-explain">使用 scoped-slot 去设置缩略图模版。</span></div>
      <el-upload action="#" list-type="picture-card" :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview4(file)"><i class="el-icon-zoom-in"></i></span>
            <span v-if="!disabled4" class="el-upload-list__item-delete" @click="handleDownload4(file)"><i class="el-icon-download"></i></span>
            <span v-if="!disabled4" class="el-upload-list__item-delete" @click="handleRemove4(file)"><i class="el-icon-delete"></i></span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible4">
        <img width="100%" :src="dialogImageUrl4" alt="">
      </el-dialog>
      <div class="tips-title">5.图片列表缩略图<span class="tips-explain"></span></div>
      <el-upload action="#" :on-preview="handlePreview5" :on-remove="handleRemove5" :file-list="fileListTest" list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <div class="tips-title">6.拖拽上传<span class="tips-explain"></span></div>
      <el-upload drag action="#" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <div class="tips-title">7.手动上传<span class="tips-explain"></span></div>
      <el-upload ref="upload" action="#" :on-preview="handlePreview7" :on-remove="handleRemove7" :file-list="fileListTest" :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload7">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
</template>
<script>
  export default {
    name: 'f-update',
    data() {
      return {
        fileListTest: [{
          name: 'food1.jpeg',
          url: '../../../../static/images/upload-test-pic.jpeg'
        }, {
          name: 'food2.jpeg',
          url: '../../../../static/images/upload-test-pic.jpeg'
        }],
        // 2.
        imageUrl2: '',
        // 3.
        dialogImageUrl3: '',
        dialogVisible3: false,
        // 4.
        dialogImageUrl4: '',
        dialogVisible4: false,
        disabled4: false,
        // 7.
      }
    },
    methods: {
      // 1.
      handleRemove1(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview1(file) {
        console.log(file);
      },
      handleExceed1(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove1(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 2.
      handleAvatarSuccess2(res, file) {
        this.imageUrl2 = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload2(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if(!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if(!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 3.
      handleRemove3(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview3(file) {
        this.dialogImageUrl3 = file.url;
        this.dialogVisible3 = true;
      },
      // 4.
      handleRemove4(file) {
        console.log(file);
      },
      handlePictureCardPreview4(file) {
        this.dialogImageUrl4 = file.url;
        this.dialogVisible4 = true;
      },
      handleDownload4(file) {
        console.log(file);
      },
      // 5.
      handleRemove5(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview5(file) {
        console.log(file);
      },
      // 7.
      submitUpload7() {
        this.$refs.upload.submit();
      },
      handleRemove7(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview7(file) {
        console.log(file);
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

